<template>
    <div class="wrapper">
        <el-divider content-position="left">基础信息</el-divider>
        <div style="text-align: right;padding: 5px 0;" v-show="menuInfo.id">
            <el-button link type="primary" icon="edit" @click="handleEdit">编辑</el-button>
        </div>
        <div class="info">
            <el-form :model="menuInfo" ref="form" label-width="80px" :inline="true" disabled>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="功能类型" prop="menuType">
                            <el-radio-group v-model="menuInfo.menuType">
                                <el-radio v-for="item in menuTypes" :key="item.value" :value="item.value">
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单名称" prop="name">
                            <el-input v-model="menuInfo.name" placeholder="请输入菜单名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="功能标识" prop="funcKey">
                            <template #label>
                                <span>
                                    <el-tooltip content="用来代表功能的唯一标识符，如：feature:menu" placement="top">
                                        <el-icon><question-filled /></el-icon>
                                    </el-tooltip>
                                    功能标识
                                </span>
                            </template>
                            <el-input v-model="menuInfo.funcKey" placeholder="请输入功能标识" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="menuInfo.menuType != 0">
                        <el-form-item prop="perm">
                            <el-select-v2 v-model="menuInfo.perm" maxlength="100" filterable remote
                                :remote-method="permRemote" multiple collapse-tags collapse-tags-tooltip clearable
                                :options="permOptions" :loading="permLoading" placeholder="请输入接口权限串">
                                <template #prefix>
                                    <el-icon>
                                        <search />
                                    </el-icon>
                                </template>
                                <template #default="{ item }">
                                    <span style="margin-right: 8px">{{ item.text }}</span>
                                    <span style="color: var(--el-text-color-secondary); font-size: 13px">
                                        {{ item.value }}
                                    </span>
                                </template>
                            </el-select-v2>
                            <template #label>
                                <span>
                                    <el-tooltip content="接口管理中定义的接口权限，如：system:user:list，也可以自定义前端接口权限" placement="top">
                                        <el-icon><question-filled /></el-icon>
                                    </el-tooltip>
                                    接口权限
                                </span>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="menuInfo.menuType != 2">
                        <el-form-item label="菜单图标" prop="icon">
                            <IconPlus v-if="menuInfo.icon" :name="menuInfo.icon" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="显示排序" prop="order">
                            <el-input-number v-model="menuInfo.order" controls-position="right" :min="0" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12" v-if="menuInfo.menuType == 1">
                        <el-form-item prop="routeName">
                            <template #label>
                                <span>
                                    <el-tooltip
                                        content="默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：因为router会删除名称相同路由，为避免名字的冲突，特殊情况下请自定义，保证唯一性）"
                                        placement="top">
                                        <el-icon><question-filled /></el-icon>
                                    </el-tooltip>
                                    路由名称
                                </span>
                            </template>
                            <el-input v-model="menuInfo.routeName" placeholder="请输入路由名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="menuInfo.menuType != 2">
                        <el-form-item>
                            <template #label>
                                <span>
                                    <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                                        <el-icon><question-filled /></el-icon>
                                    </el-tooltip>是否外链
                                </span>
                            </template>
                            <el-radio-group v-model="menuInfo.isFrame">
                                <el-radio :value="true">是</el-radio>
                                <el-radio :value="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="menuInfo.menuType != 2">
                        <el-form-item prop="path">
                            <template #label>
                                <span>
                                    <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                                        <el-icon><question-filled /></el-icon>
                                    </el-tooltip>
                                    路由地址
                                </span>
                            </template>
                            <el-input v-model="menuInfo.path" placeholder="请输入路由地址" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="menuInfo.menuType == 1">
                        <el-form-item prop="component">
                            <template #label>
                                <span>
                                    <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                                        <el-icon><question-filled /></el-icon>
                                    </el-tooltip>
                                    组件路径
                                </span>
                            </template>
                            <el-input v-model="menuInfo.component" placeholder="请输入组件路径" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12" v-if="menuInfo.menuType == 1">
                        <el-form-item>
                            <el-input v-model="menuInfo.query" placeholder="请输入路由参数" maxlength="255" />
                            <template #label>
                                <span>
                                    <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
                                        <el-icon><question-filled /></el-icon>
                                    </el-tooltip>
                                    路由参数
                                </span>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="menuInfo.menuType == 1">
                        <el-form-item>
                            <template #label>
                                <span>
                                    <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                                        <el-icon><question-filled /></el-icon>
                                    </el-tooltip>
                                    是否缓存
                                </span>
                            </template>
                            <el-radio-group v-model="menuInfo.isCache">
                                <el-radio :value="true">缓存</el-radio>
                                <el-radio :value="false">不缓存</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="menuInfo.menuType != 1">
                        <el-form-item>
                            <template #label>
                                <span>
                                    <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                                        <el-icon><question-filled /></el-icon>
                                    </el-tooltip>
                                    显示状态
                                </span>
                            </template>
                            <el-radio-group v-model="menuInfo.visible">
                                <el-radio v-for="dict in sys_show_hide" :key="dict.value" :value="dict.value">{{
                                    dict.label
                                    }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item>
                            <template #label>
                                <span>
                                    <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                                        <el-icon><question-filled /></el-icon>
                                    </el-tooltip>
                                    菜单状态
                                </span>
                            </template>
                            <el-radio-group v-model="menuInfo.isActive">
                                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{
                                    dict.label
                                    }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item>
                        <template #label>
                            <span>
                                授权访问
                            </span>
                        </template>
                        <el-radio-group v-model="menuInfo.requiresAuth">
                            <el-radio v-for="dict in sys_yes_no" :key="dict.value" :value="dict.value">
                                {{ dict.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                </el-row>
            </el-form>
        </div>

    </div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const { sys_show_hide, sys_normal_disable, sys_yes_no} = proxy.useDict("sys_show_hide", "sys_normal_disable","sys_yes_no");

const menuInfo = defineModel({
    type: Object,
    required: false,
    default: {
        id: undefined,
        name: "",
    }
})
const emits = defineEmits(['editEvent'])

const permLoading = ref(false);
const permOptions = ref([])
const menuTypes = reactive([{
    value: 0,
    label: "目录"
}, {
    value: 1,
    label: "菜单"
}, {
    value: 2,
    label: '按钮'
}])

const permRemote = (keyword) => {
    permLoading.value = true;
    apipermissionsOptions(keyword).then(res => {
        permOptions.value = res.map(item => ({ value: item.permissionKey, label: item.permissionKey, text: item.name }))
    }).finally(() => {
        permLoading.value = false;
    })
}

//触发编辑
const handleEdit = () => {
    emits("editEvent", menuInfo.value)
}

</script>

<style lang="scss" scoped>
.wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;

    .info {
        flex: 1;
        overflow-y: auto;
    }
}
</style>